.wraper {
    background-size: cover;
    background-repeat: no-repeat;

    &.dark {
        --subtitle-color: #3333331a;
        --title-color: #333;
    }

    &.light {
        --subtitle-color: #ffffff1a;
        --title-color: #fff;
    }
}

.innerbox {
    @apply relative;
}

.subtitle {
    z-index: var(--render-zindex-lower);

    @apply absolute left-0 right-0 top-0;
}

.titlewrap {
    z-index: var(--render-zindex-basic);

    @apply relative overflow-hidden;
}

.mobile.wraper {
    .innerbox {
        --inner-padding-top: 30px;

        padding-top: var(--inner-padding-top);
    }

    .subtitle {
        color: var(--subtitle-color);
        top: var(--inner-padding-top);

        @apply text-32px !leading-32px font-900 text-center;
    }

    .titlewrap {
        &.has-subtitle {
            @apply pt-4;
        }

        .title {
            color: var(--title-color);
            padding-left: 42px;
            padding-right: 42px;

            @apply text-center text-2xl !leading-30px font-900;
        }

        .title-line {
            width: 48px;
            height: 2px;
            margin-bottom: 10px;

            @apply mt-4 mx-auto;
        }
    }

    .description {
        color: var(--title-color);

        @apply text-sm !leading-24px text-center px-4;
    }
}

.pc.wraper {
    .innerbox {
        --inner-padding-top: 50px;

        padding-top: var(--inner-padding-top);
    }

    .subtitle {
        color: var(--subtitle-color);
        top: var(--inner-padding-top);

        @apply text-56px !leading-64px font-900 text-center;
    }

    .titlewrap {
        &.has-subtitle {
            @apply pt-36px;
        }

        .title {
            color: var(--title-color);

            @apply text-center text-40px !leading-48px font-900;
        }

        .title-line {
            width: 80px;
            height: 6px;
            margin-bottom: 32px;

            @apply mt-10 mx-auto;
        }
    }

    .description {
        color: var(--title-color);

        @apply text-2xl !leading-32px text-center;
    }
}
